<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>DIV+JS三级联动效果</title>

<script src="js/jquery-1.11.3.min.js"></script>

</head>



<style type="text/css">

html{ overflow:hidden; background:#fff; width:100%; height:100%;}

html,body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,p,blockquote,th,td {margin:0;padding:0;}

body{font-family: "微软雅黑"; font-size:12px; color:#000000; background:#fff;overflow:hidden; width:100%; height:100%;}

button,input,select,textarea{ font:12px/1.5  Arial, "宋体", Helvetica,  Verdana, sans-serif; word-wrap:break-word; color:#565756;}

ul,li{ list-style:none; margin:0; padding:0;}

h1, h2, h3, h4, h5, h6{font-weight:normal; font-size:100%;} 

img{ border:none; border:0; vertical-align:middle;}

a{ text-decoration:none; outline:none;}

p{ margin:0; padding:0;}

input,select,textarea{vertical-align:middle; *font-size:100%;}

input{ margin:0;outline:none; padding:0;}

input::-ms-clear{display:none;}

.clearfix:after{

     content:".";        

     display:block;        

     height:0;        

     clear:both;        

     visibility:hidden;        



}

.clearfix{*zoom:1}



/* m_zlxg */

.m_zlxg{ width:93px; height:30px; line-height:30px;cursor:pointer;float:left;margin:0 10px 0 0;display:inline;background:url(images/zlxg2.jpg) no-repeat;}

.m_zlxg p{ width:71px; padding-left:10px; overflow:hidden; line-height:30px; color:#333333; font-size:12px; font-family:"微软雅黑";text-overflow:ellipsis; white-space:nowrap;}

.m_zlxg2{ position:absolute; top:29px; border:1px solid #ded3c1;background:#fff; width:91px; display:none; max-height:224px;-height:224px; overflow-x:hidden; overflow-y:auto;white-space:nowrap;}

.m_zlxg2 li{line-height:28px;white-space:nowrap; padding-left:10px;font-family:"微软雅黑";color:#333333; font-size:12px;}

.m_zlxg2 li:hover{ color:#7a5a21;}

</style>

<body>



<div id="sjld" style="width:520px;margin:40px auto;position:relative;">

	<div class="m_zlxg" id="shenfen">

		<p title="">选择省份</p>

		<div class="m_zlxg2">

			<ul></ul>

		</div>

	</div>

	<div class="m_zlxg" id="chengshi">

		<p title="">选择城市</p>

		<div class="m_zlxg2">

			<ul></ul>

		</div>

	</div>

	<div class="m_zlxg" id="quyu">

		<p title="">选择区域</p>

		<div class="m_zlxg2">

			<ul></ul>

		</div>

	</div>

	<input id="sfdq_num" type="hidden" value="" />

	<input id="csdq_num" type="hidden" value="" />

	<input id="sfdq_tj" type="hidden" value="" />

	<input id="csdq_tj" type="hidden" value="" />

	<input id="qydq_tj" type="hidden" value="" />

</div>



<script type="text/javascript" src="js/adress.js"></script>

<script type="text/javascript">

$(function(){



	$("#sjld").sjld("#shenfen","#chengshi","#quyu");

	

});

</script>



</body>

</html>
